<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <view
    class="u-safe-bottom"
    :style="[style]"
    :class="[!isNvue && 'u-safe-area-inset-bottom']"
  >
  </view>
</template>

<script>
import props from "./props.js";
/**
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @tutorial https://www.uviewui.com/components/safeAreaInset.html
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <u-status-bar></u-status-bar>
 */
export default {
  name: "u-safe-bottom",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      safeAreaBottomHeight: 0,
      isNvue: false,
    };
  },
  computed: {
    style() {
      const style = {};
      // #ifdef APP-NVUE
      // nvue下，高度使用js计算填充
      style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, "px");
      // #endif
      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
    },
  },
  mounted() {
    // #ifdef APP-NVUE
    // 标识为是否nvue
    this.isNvue = true;
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.u-safe-bottom {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
}
</style>
